<template>
	<view class="">
		<u-toast ref="ucToast"></u-toast>
		<!-- 交易确认弹窗-->
		<u-popup :show="moneyShow" mode="center" @close="close" round="16rpx" bgColor='transparent'
			overlayOpacity='0.85' closeOnClickOverlay>
			<view class="popup-one-box flex-col align-center"
			:style="{background: 'url(/static/images/index/gonggao.png) #fff no-repeat center center / 100% 100%'}"
			>
					<image class="popup-title" src="/static/images/index/title.png" mode=""></image>
				<!-- <view class="has-shuijing justify-start">
					为了确保你的利益，请仔细确认本次赠送信息
				</view> -->
				<u-toast ref="uToast"></u-toast>
				<view class="info-box">
					<view class="top-cell-title ">
						{{'帐号异常'}}
						
					</view>
					<view class="top-cell  ">
						{{'帐号异常'}}
						
					</view>
				</view>

				<view class="popup-box-btn align-center justify-center" @click="putLong">
					
					确定
				</view>
				<!-- <view class="tips align-center justify-center">
					赠送后无法撤回,请谨慎操作
				</view> -->
				<view class="popup-box-cancel align-center justify-center" @click="close">
					<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
				</view>
			</view>
		</u-popup>

	</view>

</template>

<script>
	import {
		randomString
	} from '@/utils/libs.js'
	import base64Arraybuffer from 'base64-arraybuffer'
	export default {
		components: {
			// 注册组件

		},
		props: {
			isShow: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
				default: () => {},
			},
			num: {
				type: Number,
				default: 1,
			}
		},
		data() {
			return {
				randomString,
				number: 1,
				moneyShow: false,
				parsswordShow: false,
				loading: false,
				captcha: {
					id: '',
					img: '',
					captcha: "",
				},
			}
		},
		computed: {
			disable() {
				return !(this.captcha.captcha.length == 4)
			}
		},
		watch: {
			// isShow(val) {
			// 	console.log(val, 'modal');
			// 	this.moneyShow = val
			// 	if (val) {}
			// },
			isShow: {
				handler: function(o, val) {
					console.log('弹窗', o, val);
					this.moneyShow = o
					if (!o) {
						this.captcha= {
							id: '',
							img: '',
							captcha: "",
						}
					}else{
						// this.getCaptcha()
					}
				},
				deep: true, // 深度监听
				immediate: true, // 立即执行
			}
		},
		created() {
		},
		methods: {
			close() {
				this.$emit('close')
			},
			putLong() {
				if (this.disable) return
				console.log('验证码');
				this.$emit('sendMobileCode', this.captcha)
			},
			/**
			 * 获取验证图
			 */


			async getCaptcha() {
				this.captcha.id = this.randomString(8)
				// if (this.sing == 1) return
				let res = await this.$postRequest('/api/v1/captcha', {
					rand_id: this.captcha.id
				})
				// let img = 'data:image/png;base64,' + res
				console.log('res', base64Arraybuffer);
				let img = 'data:image/png;base64,' + base64Arraybuffer.encode(res)
				console.log('captchaimg', img);
				this.captcha.img = img
				if (res.code === 200) {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				} else {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'error'
					// })
				}

			},
			async putLong1(e) {
				let _this = this
				if (this.loading) return
				this.loading = true
				let url = '/api/v1/crystal_transfer'
				let {
					code,
					msg,
					data
				} = await this.$postRequest(url, {
					to_code: this.data.code,
					number: this.num,
					pay_password: e
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.parsswordShow = false
					this.loading = false
					this.$refs.ucToast.show({
						message: msg,
						complete() {
							_this.$emit('update', true)
							_this.close()
						}
					})

				} else {
					this.loading = false
					this.$refs.ucToast.show({
						message: msg
					})
				}
			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	
	.popup-box-cancel {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: -120rpx;
	}
	
	.close-popup {
		width: 48rpx;
		height: 48rpx;
	}
	// 放置青龙样式
	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		height: 740rpx;
		border-radius: 30rpx;
		background: #21212D;
		padding: 40rpx 40rpx 40rpx;

		.popup-title {
			position: absolute;
			top: 40rpx;
			left: 26rpx;
			width: 176rpx;
			height: 38rpx;
		}

		.info-box {
			width: 100%;
			position: relative;
			margin: 300rpx auto 24rpx;
			border-radius: 16rpx;
			.top-cell-title{
				font-weight: 700;
				font-size: 40rpx;
			}

			.top-cell {
				font-size: 28rpx;
				color: #51695B;
				text-align: left;
				// height: 120rpx;
				padding: 35rpx 0;


				/deep/ .u-code-input__item {
					background: #292838;
				}

			}


			.my-qing-long {
				width: 430rpx;
				height: 132rpx;
			}

			.long-num {
				width: 30rpx;
				height: 30rpx;

			}

			.he-ji {
				font-size: 26rpx;
				color: #20FFA8;
				;
			}
		}

		.has-shuijing {
			width: 100%;
			// height: 44rpx;
			font-size: 23rpx;
			color: #A6A6B2;
			margin-bottom: 33rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
			text-align: left;
			margin-bottom: 16rpx;
		}

		.popup-box-btn {
			position: absolute;
			bottom: 68rpx;
			width: 475rpx;
			height: 90rpx;
			background: #061E11;
			color: #FFF;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: bold;
		}

		.tips {
			margin-top: 29rpx;
			font-size: 24rpx;
			color: #CFCFD9;
		}



		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}






		.put-num-tip {
			font-size: 25rpx;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		// background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>